require('../less/course.less')

require('../fonts/iconfont.css')


const newestbix = document.querySelector(".newestbix") //最新课程
const basics = document.querySelector(".basics")  //基本课程

//事件委派
const courseContainer = document.querySelector("#courseContainer")



document.ready(function () {

    utils.registers()
    //1动态导航
    utils.showTabs('sports')





    //运动顶部导航
    utils.showTop("course")


    //获取当前用户的课程列表
    function timetable() {
        //发送请求
        $http.get(`/sports/courseList?id=${localStorage.getItem("userId")}`, function (res) {
            //console.log(res);
            if (res.status === 0) {
                //接收数据
                const shuju2 = res.data
                console.log(shuju2);
                /* filter筛选字符串和数组符合条件的元素 */
                //分开最新课程
                const zuixin = shuju2.filter(function (res) {
                    return res.latest === 1
                })


                //将最新课程渲染到页面中
                //1定义一个空字符串
                let kongzifu = ""
                //2遍历数组
                zuixin.forEach(function (value, index) {
                    kongzifu += `
                
            <div class="newest" data-id="${value.courseId}">
                <img src="http://139.9.177.51:8099${value.imgurl}" alt="">
                <h4 class="newesth4">${value.name}</h4>
                <p class="newestp">${value.desc}</p>
            </div>
                
                `
                })
                //3渲染页面吧
                newestbix.innerHTML += kongzifu





                //分开课程
                const zuijiu = shuju2.filter(function (res) {
                    return res.latest === 0
                })
                // console.log(zuixin, zuijiu);
                //将分开课程渲染到页面中
                //1定义一个空字符串
                let kongzifu2 = ""
                //2遍历数组
                zuijiu.forEach(function (value, index) {
                    kongzifu2 += `
                
                         
            <div class="newest" data-id="${value.courseId}">
            <img src="http://139.9.177.51:8099${value.imgurl}" alt="">
            <h4 class="newesth4">${value.name}</h4>
            <p class="newestp">${value.desc}</p>
        </div>
                
                `
                })
                //3渲染页面吧
                basics.innerHTML += kongzifu2

            }
        })
    }
    timetable()


    //点击跳转课程详情
    const newest = document.querySelector(".newest")
    // console.log(newest);
    courseContainer.addEventListener("click", function (e) {
        // console.log(e.target);//parentNode就是找当前负极  includes就是指判断数组或字符串是否有指定元素

        // console.log(e.target.parentNode.className.includes("newest"));
        if (e.target.parentNode.className.includes("newest")) {

            //携带参数过去
            let id = e.target.parentNode.dataset.id
            // console.log(id);

            //将课程id存储到本地
            localStorage.setItem("courseid", id)


            //跳转
            location.href = `./courseDetail.html?id=${id}`
        }
    })

})